<template>
  <div class="mobile-work-order-detail">
    <!-- 顶部导航 -->
    <div class="mobile-header">
      <div class="header-content">
        <el-button 
          type="primary" 
          :icon="ArrowLeft" 
          @click="$router.back()"
          circle
        />
        <div class="header-title">工单详情</div>
      </div>
    </div>

    <div class="detail-content" v-loading="loading">
      <!-- 工单基本信息卡片 -->
      <div class="info-card">
        <div class="card-header">
          <div class="order-number">{{ workOrder.order_number || `#${workOrder.id}` }}</div>
          <el-tag :type="getStatusType(workOrder.status)" size="large">
            {{ getStatusText(workOrder.status) }}
          </el-tag>
        </div>
        
        <div class="order-title">{{ workOrder.title || '无标题' }}</div>
        
        <div class="order-meta">
          <div class="meta-item">
            <el-icon><User /></el-icon>
            <span>{{ workOrder.creator_name || '未知' }}</span>
          </div>
          <div class="meta-item">
            <el-icon><Clock /></el-icon>
            <span>{{ formatDate(workOrder.created_at) }}</span>
          </div>
          <div class="meta-item">
            <el-icon><Location /></el-icon>
            <span>{{ workOrder.location || '未指定位置' }}</span>
          </div>
        </div>
        
        <div class="priority-section">
          <span class="label">优先级：</span>
          <el-tag :type="getPriorityType(workOrder.priority)" size="small">
            {{ getPriorityText(workOrder.priority) }}
          </el-tag>
        </div>
      </div>

      <!-- 详细信息 -->
      <div class="detail-card">
        <div class="section-title">详细信息</div>
        <div class="detail-item">
          <div class="item-label">负责人</div>
          <div class="item-value">{{ workOrder.assignee_name || '未分配' }}</div>
        </div>
        <div class="detail-item">
          <div class="item-label">工单类型</div>
          <div class="item-value">{{ getTypeText(workOrder.type) }}</div>
        </div>
        <div class="detail-item">
          <div class="item-label">预计完成时间</div>
          <div class="item-value">{{ formatDate(workOrder.scheduled_end) || '未设置' }}</div>
        </div>
        <div class="detail-item" v-if="workOrder.description">
          <div class="item-label">描述</div>
          <div class="item-value description">{{ workOrder.description }}</div>
        </div>
        <div class="detail-item" v-if="workOrder.notes">
          <div class="item-label">备注</div>
          <div class="item-value">{{ workOrder.notes }}</div>
        </div>
      </div>

      <!-- 自定义字段 -->
      <div class="detail-card" v-if="customFieldValues && Object.keys(customFieldValues).length > 0">
        <div class="section-title">自定义字段</div>
        <div 
          class="detail-item" 
          v-for="(value, fieldName) in customFieldValues" 
          :key="fieldName"
        >
          <div class="item-label">{{ getCustomFieldLabel(fieldName) }}</div>
          <div class="item-value">
            <span>{{ formatCustomFieldValue(value) }}</span>
          </div>
        </div>
      </div>

      <!-- 操作按钮 -->
      <div class="action-card" v-if="canOperate">
        <div class="section-title">操作</div>
        <div class="action-buttons">
          <el-button 
            v-if="workOrder.status === 'pending'"
            type="primary" 
            size="large"
            @click="acceptOrder"
            style="width: 100%; margin-bottom: 12px;"
          >
            接单
          </el-button>
          
          
          <!-- 反馈和回单按钮并排排列 -->
          <div class="button-row" v-if="(workOrder.status === 'in_progress' && isAssignee) || canEdit">
            <el-button 
              v-if="workOrder.status === 'in_progress' && isAssignee"
              type="success" 
              size="large"
              @click="showFeedbackDialog"
              style="flex: 1; margin-right: 8px;"
            >
              反馈
            </el-button>
            
            <el-button 
              v-if="canEdit"
              type="warning" 
              size="large"
              @click="editWorkOrder"
              style="flex: 1;"
            >
              回单
            </el-button>
          </div>
        </div>
      </div>

      <!-- 处理记录 -->
      <div class="detail-card">
        <div class="section-title">处理记录</div>
        <div class="timeline">
          <div 
            class="timeline-item" 
            v-for="record in processRecords" 
            :key="record.id"
          >
            <div class="timeline-dot"></div>
            <div class="timeline-content">
              <div class="record-action">{{ getActionText(record.action) }}</div>
              <div class="record-description">{{ record.description }}</div>
              <div class="record-meta">
                <span class="operator">操作人：{{ record.user ? record.user.name || record.user.username : '未知' }}</span>
                <span class="time">{{ formatDate(record.created_at) }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 反馈对话框 -->
    <el-dialog 
      v-model="feedbackDialogVisible" 
      title="处理反馈" 
      width="90%"
      :before-close="closeFeedbackDialog"
    >
      <el-form :model="feedbackForm" label-width="80px">
        <el-form-item label="处理情况">
          <el-input 
            v-model="feedbackForm.description"
            type="textarea"
            :rows="4"
            placeholder="请描述当前处理情况..."
          />
        </el-form-item>
        <el-form-item label="进度">
          <el-slider 
            v-model="feedbackForm.progress"
            :max="100"
            show-input
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="closeFeedbackDialog">取消</el-button>
        <el-button type="primary" @click="submitFeedback">提交反馈</el-button>
      </template>
    </el-dialog>

    <!-- 完成工单对话框 -->
    <el-dialog 
      v-model="completeDialogVisible" 
      title="完成工单" 
      width="90%"
      :before-close="closeCompleteDialog"
    >
      <el-form :model="completeForm" label-width="100px">
        <el-form-item label="完成描述" required>
          <el-input 
            v-model="completeForm.description"
            type="textarea"
            :rows="4"
            placeholder="请描述完成情况..."
          />
        </el-form-item>
        
        <el-form-item label="障碍原因">
          <el-select 
            v-model="completeForm.fault_category"
            placeholder="请选择障碍原因分类"
            style="width: 100%"
          >
            <el-option label="设备故障" value="equipment_failure" />
            <el-option label="电路问题" value="circuit_issue" />
            <el-option label="软件故障" value="software_issue" />
            <el-option label="人为损坏" value="human_damage" />
            <el-option label="自然损耗" value="natural_wear" />
            <el-option label="其他" value="other" />
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="closeCompleteDialog">取消</el-button>
        <el-button type="primary" @click="submitComplete">完成工单</el-button>
      </template>
    </el-dialog>

    <!-- 材料录入对话框 -->
    <el-dialog 
      v-model="materialDialogVisible" 
      title="材料录入" 
      width="90%"
      :before-close="closeMaterialDialog"
    >
      <div class="material-section">
        <div class="section-title">选择材料</div>
        <el-form :model="materialForm" label-width="80px">
          <el-form-item label="材料">
            <el-select
              v-model="materialForm.material_id"
              placeholder="请选择材料"
              filterable
              style="width: 100%"
              @change="onMaterialSelect"
            >
              <el-option
                v-for="material in availableMaterials"
                :key="material.id"
                :label="`${material.name} (${material.code})`"
                :value="material.id"
              >
                <div style="display: flex; justify-content: space-between;">
                  <span>{{ material.name }}</span>
                  <span style="color: #999; font-size: 12px;">库存: {{ material.stock_quantity }} {{ material.unit }}</span>
                </div>
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="数量">
            <el-input-number
              v-model="materialForm.quantity"
              :min="1"
              :max="selectedMaterial?.stock_quantity || 999999"
              placeholder="请输入数量"
              style="width: 100%"
            />
          </el-form-item>
          <el-button 
            type="primary" 
            @click="addMaterialToList" 
            :disabled="!materialForm.material_id || !materialForm.quantity"
            style="width: 100%; margin-top: 12px;"
          >
            添加至清单
          </el-button>
        </el-form>
      </div>
      
      <div class="material-list" v-if="materialsToAdd.length > 0">
        <div class="section-title">待录入材料</div>
        <div class="material-item" v-for="(material, index) in materialsToAdd" :key="index">
          <div class="material-info">
            <div class="material-name">{{ material.name }}</div>
            <div class="material-spec">{{ material.specification }}</div>
            <div class="material-quantity">{{ material.quantity }} {{ material.unit }}</div>
          </div>
          <el-button type="danger" size="small" @click="removeMaterialFromList(index)">删除</el-button>
        </div>
      </div>
      
      <template #footer>
        <el-button @click="closeMaterialDialog">取消</el-button>
        <el-button type="primary" @click="submitMaterialUsage" :disabled="materialsToAdd.length === 0">确定录入</el-button>
      </template>
    </el-dialog>

    <!-- 回单对话框 -->
    <el-dialog 
      v-model="receiptDialogVisible" 
      title="工单回单" 
      width="90%"
      :before-close="closeReceiptDialog"
    >
      <el-form :model="receiptForm" label-width="100px">
        <el-form-item label="回单内容" required>
          <el-input 
            v-model="receiptForm.content"
            type="textarea"
            :rows="6"
            placeholder="请填写回单内容，包括工作完成情况、遇到的问题、建议等..."
          />
        </el-form-item>
        
        <el-form-item label="客户满意度">
          <el-rate 
            v-model="receiptForm.satisfaction"
            :max="5"
            show-text
            :texts="['很差', '较差', '一般', '满意', '非常满意']"
          />
        </el-form-item>
        
        <el-form-item label="是否需要回访">
          <el-switch 
            v-model="receiptForm.needFollowUp"
            active-text="是"
            inactive-text="否"
          />
        </el-form-item>
        
        <el-form-item v-if="receiptForm.needFollowUp" label="回访说明">
          <el-input 
            v-model="receiptForm.followUpNote"
            type="textarea"
            :rows="3"
            placeholder="请说明需要回访的原因..."
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="closeReceiptDialog">取消</el-button>
        <el-button type="primary" @click="submitReceipt">提交回单</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, computed, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'
import { ArrowLeft, User, Clock, Location } from '@element-plus/icons-vue'
import { useAuthStore } from '@/stores/auth'
import api from '@/api'

const route = useRoute()
const router = useRouter()
const authStore = useAuthStore()
const loading = ref(false)

// 工单数据
const workOrder = ref({
  id: null,
  order_number: '',
  title: '',
  description: '',
  status: '',
  priority: '',
  type: '',
  location: '',
  notes: '',
  creator_name: '',
  assignee_name: '',
  assignee_id: null,
  creator_id: null,
  created_at: '',
  scheduled_end: '',
  custom_fields: null
})
const processRecords = ref([])
const customFields = ref([])
const customFieldValues = ref({})

// 新记录
const newRecord = reactive({
  description: ''
})

// 反馈对话框
const feedbackDialogVisible = ref(false)
const feedbackForm = ref({
  work_order_id: null,
  description: '',
  progress: 50
})

// 完成对话框
const completeDialogVisible = ref(false)
const completeForm = ref({
  work_order_id: null,
  description: '',
  fault_category: ''
})

// 材料录入
const materialDialogVisible = ref(false)
const availableMaterials = ref([])
const selectedMaterial = ref(null)
const materialsToAdd = ref([])
const materialForm = reactive({
  material_id: '',
  quantity: 1
})

// 回单对话框
const receiptDialogVisible = ref(false)
const receiptForm = ref({
  work_order_id: null,
  content: '',
  satisfaction: 5,
  needFollowUp: false,
  followUpNote: ''
})

// 计算属性
const canOperate = computed(() => {
  // 调试信息
  console.log('authStore.user:', authStore.user)
  console.log('authStore.isLoggedIn:', authStore.isLoggedIn)
  
  // 如果用户已登录，就显示操作按钮
  return authStore.isLoggedIn && authStore.user
})

const isAssignee = computed(() => {
  return workOrder.value.assignee_id === authStore.user?.id
})

const canEdit = computed(() => {
  const user = authStore.user
  if (!user) return false
  
  // 管理员可以编辑所有工单
  if (user.role === 'admin') return true
  
  // 创建者和分配者可以编辑未完成的工单
  if (workOrder.value.status !== 'completed' && workOrder.value.status !== 'cancelled') {
    return workOrder.value.creator_id === user.id || workOrder.value.assignee_id === user.id
  }
  
  return false
})

// 工具方法
const getStatusType = (status) => {
  const types = {
    pending: 'warning',
    assigned: 'info',
    in_progress: 'primary',
    completed: 'success',
    cancelled: 'danger'
  }
  return types[status] || 'info'
}

const getStatusText = (status) => {
  const texts = {
    pending: '待处理',
    assigned: '已分配',
    in_progress: '处理中',
    completed: '已完成',
    cancelled: '已取消'
  }
  return texts[status] || status
}

const getPriorityType = (priority) => {
  const types = {
    low: 'info',
    medium: 'warning',
    high: 'danger',
    urgent: 'danger'
  }
  return types[priority] || 'info'
}

const getPriorityText = (priority) => {
  const texts = {
    low: '低',
    medium: '中',
    high: '高',
    urgent: '紧急'
  }
  return texts[priority] || priority
}

const getTypeText = (type) => {
  const texts = {
    maintenance: '维修',
    cleaning: '清洁',
    safety: '安全检查',
    other: '其他'
  }
  return texts[type] || type
}

const getActionText = (action) => {
  const texts = {
    created: '创建工单',
    assigned: '分配工单',
    accepted: '接受工单',
    progress_update: '进度更新',
    completed: '完成工单',
    cancelled: '取消工单',
    reopened: '重新开启',
    material_added: '添加材料',
    comment_added: '添加备注',
    status_changed: '状态变更',
    priority_changed: '优先级变更',
    receipt: '工单回单'
  }
  return texts[action] || action
}

const getCustomFieldLabel = (fieldName) => {
  const field = customFields.value.find(f => f.name === fieldName)
  return field ? field.label : fieldName
}

const formatDate = (dateString) => {
  if (!dateString) return ''
  const date = new Date(dateString)
  return date.toLocaleDateString('zh-CN', {
    month: '2-digit',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit'
  })
}

const formatCustomFieldValue = (value) => {
  if (!value) return '无'
  
  // 如果是字符串且看起来像JSON数组，尝试解析
  if (typeof value === 'string') {
    // 处理类似 "['掉线']" 这样的字符串
    if (value.startsWith('[') && value.endsWith(']')) {
      try {
        const parsed = JSON.parse(value.replace(/'/g, '"'))
        if (Array.isArray(parsed)) {
          return parsed.length > 0 ? parsed.join(', ') : '无'
        }
      } catch (e) {
        console.warn('Failed to parse array string:', value)
      }
    }
    
    // 尝试解析其他JSON格式
    try {
      const parsed = JSON.parse(value)
      if (parsed && typeof parsed === 'object' && parsed.value !== undefined) {
        // 如果解析出的对象有value属性，使用value
        if (Array.isArray(parsed.value)) {
          return parsed.value.length > 0 ? parsed.value.join(', ') : '无'
        }
        return parsed.value || '无'
      }
      // 如果解析出的是数组
      if (Array.isArray(parsed)) {
        return parsed.length > 0 ? parsed.join(', ') : '无'
      }
    } catch (e) {
      // 如果解析失败，直接返回原字符串
      return value
    }
  }
  
  // 如果是数组
  if (Array.isArray(value)) {
    return value.length > 0 ? value.join(', ') : '无'
  }
  
  // 如果是对象且有value属性
  if (typeof value === 'object' && value.value !== undefined) {
    if (Array.isArray(value.value)) {
      return value.value.length > 0 ? value.value.join(', ') : '无'
    }
    return value.value || '无'
  }
  
  // 其他情况直接返回
  return value.toString()
}

// 数据加载方法
const loadWorkOrder = async () => {
  loading.value = true
  try {
    const id = route.params.id
    console.log('正在加载工单ID:', id)
    const response = await api.getWorkOrder(id)
    console.log('API响应:', response)
    
    // 后端返回的数据结构是 {work_order: {...}}
    workOrder.value = response.data.work_order || response.data
    console.log('工单数据:', workOrder.value)
    
    // 解析自定义字段
    if (workOrder.value.custom_fields) {
      customFieldValues.value = typeof workOrder.value.custom_fields === 'string' 
        ? JSON.parse(workOrder.value.custom_fields) 
        : workOrder.value.custom_fields
    }
  } catch (error) {
    console.error('加载工单失败:', error)
    ElMessage.error('加载工单失败')
  } finally {
    loading.value = false
  }
}

const loadProcessRecords = async () => {
  try {
    const id = route.params.id
    const response = await api.getProcessRecords(id)
    processRecords.value = response.data.process_records || []
  } catch (error) {
    console.error('加载处理记录失败:', error)
  }
}

const loadCustomFields = async () => {
  try {
    const response = await api.getCustomFields()
    customFields.value = response.data.fields || []
  } catch (error) {
    console.error('加载自定义字段失败:', error)
  }
}

const loadMaterials = async () => {
  try {
    const response = await api.getMaterials({ per_page: 1000 })
    availableMaterials.value = response.data?.materials || response.data || []
  } catch (error) {
    console.error('加载材料失败:', error)
    availableMaterials.value = []
  }
}

// 操作方法

const acceptOrder = async () => {
  try {
    await ElMessageBox.confirm('确定要接受这个工单吗？', '确认接单', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'info'
    })
    
    await api.updateWorkOrder(workOrder.value.id, {
      status: 'in_progress',
      assignee_id: authStore.user?.id,
      actual_start: new Date().toISOString()
    })
    
    ElMessage.success('接单成功')
    loadWorkOrder()
    loadProcessRecords()
  } catch (error) {
    if (error !== 'cancel') {
      console.error('接单失败:', error)
      ElMessage.error('接单失败')
    }
  }
}

const addRecord = async () => {
  if (!newRecord.description.trim()) {
    ElMessage.error('请输入处理记录')
    return
  }
  
  try {
    await api.createProcessRecord(workOrder.value.id, {
      action: 'progress_update',
      description: newRecord.description
    })
    
    ElMessage.success('添加记录成功')
    newRecord.description = ''
    loadProcessRecords()
  } catch (error) {
    console.error('添加记录失败:', error)
    ElMessage.error('添加记录失败')
  }
}

// 反馈相关方法
const showFeedbackDialog = () => {
  feedbackForm.value = {
    work_order_id: workOrder.value.id,
    description: '',
    progress: 50
  }
  feedbackDialogVisible.value = true
}

const submitFeedback = async () => {
  try {
    await api.createProcessRecord(feedbackForm.value.work_order_id, {
      action: 'progress_update',
      description: `处理进度: ${feedbackForm.value.progress}% - ${feedbackForm.value.description}`
    })
    
    ElMessage.success('反馈提交成功')
    closeFeedbackDialog()
    loadProcessRecords()
  } catch (error) {
    console.error('提交反馈失败:', error)
    ElMessage.error('提交反馈失败')
  }
}

const closeFeedbackDialog = () => {
  feedbackDialogVisible.value = false
  feedbackForm.value = {
    work_order_id: null,
    description: '',
    progress: 0
  }
}

// 完成相关方法
const showCompleteDialog = () => {
  completeForm.value = {
    work_order_id: workOrder.value.id,
    description: '',
    fault_category: ''
  }
  completeDialogVisible.value = true
}

const submitComplete = async () => {
  if (!completeForm.value.description.trim()) {
    ElMessage.error('请填写完成描述')
    return
  }
  
  try {
    // 更新工单状态
    await api.updateWorkOrder(completeForm.value.work_order_id, {
      status: 'completed',
      actual_end: new Date().toISOString(),
      custom_fields: {
        fault_category: completeForm.value.fault_category,
        completion_description: completeForm.value.description
      }
    })
    
    // 添加处理记录
    await api.createProcessRecord(completeForm.value.work_order_id, {
      action: 'completed',
      description: completeForm.value.description
    })
    
    ElMessage.success('工单完成成功')
    closeCompleteDialog()
    loadWorkOrder()
    loadProcessRecords()
  } catch (error) {
    console.error('完成工单失败:', error)
    ElMessage.error('完成工单失败')
  }
}

const closeCompleteDialog = () => {
  completeDialogVisible.value = false
  completeForm.value = {
    work_order_id: null,
    description: '',
    fault_category: ''
  }
}

// 材料相关方法
const openMaterialDialog = () => {
  materialDialogVisible.value = true
  loadMaterials()
}

const onMaterialSelect = () => {
  selectedMaterial.value = availableMaterials.value.find(m => m.id === materialForm.material_id)
}

const addMaterialToList = () => {
  if (!materialForm.material_id || !materialForm.quantity) {
    ElMessage.error('请选择材料和数量')
    return
  }
  
  const material = availableMaterials.value.find(m => m.id === materialForm.material_id)
  if (!material) {
    ElMessage.error('材料不存在')
    return
  }
  
  materialsToAdd.value.push({
    material_id: material.id,
    name: material.name,
    specification: material.specification,
    quantity: materialForm.quantity,
    unit: material.unit
  })
  
  // 重置表单
  materialForm.material_id = ''
  materialForm.quantity = 1
  selectedMaterial.value = null
}

const removeMaterialFromList = (index) => {
  materialsToAdd.value.splice(index, 1)
}

const submitMaterialUsage = async () => {
  if (materialsToAdd.value.length === 0) {
    ElMessage.error('请添加材料')
    return
  }
  
  try {
    const materialUsages = materialsToAdd.value.map(m => ({
      work_order_id: workOrder.value.id,
      material_id: m.material_id,
      quantity: m.quantity,
      usage_type: '工单使用',
      purpose: '工单材料使用'
    }))
    
    await api.addMultipleMaterialUsage(materialUsages)
    
    ElMessage.success('材料录入成功')
    closeMaterialDialog()
  } catch (error) {
    console.error('材料录入失败:', error)
    ElMessage.error('材料录入失败')
  }
}

const closeMaterialDialog = () => {
  materialDialogVisible.value = false
  materialsToAdd.value = []
  materialForm.material_id = ''
  materialForm.quantity = 1
  selectedMaterial.value = null
}

// 回单相关方法
const showReceiptDialog = () => {
  receiptForm.value = {
    work_order_id: workOrder.value.id,
    content: '',
    satisfaction: 5,
    needFollowUp: false,
    followUpNote: ''
  }
  receiptDialogVisible.value = true
}

const submitReceipt = async () => {
  if (!receiptForm.value.content.trim()) {
    ElMessage.error('请填写回单内容')
    return
  }
  
  try {
    // 创建回单记录
    const receiptData = {
      action: 'receipt',
      description: `回单内容: ${receiptForm.value.content}\n客户满意度: ${receiptForm.value.satisfaction}星${receiptForm.value.needFollowUp ? '\n需要回访: ' + receiptForm.value.followUpNote : ''}`
    }
    
    await api.createProcessRecord(receiptForm.value.work_order_id, receiptData)
    
    ElMessage.success('回单提交成功')
    closeReceiptDialog()
    loadProcessRecords()
  } catch (error) {
    console.error('提交回单失败:', error)
    ElMessage.error('提交回单失败')
  }
}

const closeReceiptDialog = () => {
  receiptDialogVisible.value = false
  receiptForm.value = {
    work_order_id: null,
    content: '',
    satisfaction: 5,
    needFollowUp: false,
    followUpNote: ''
  }
}

// 编辑工单
const editWorkOrder = () => {
  // 跳转到编辑页面
  router.push(`/mobile/work-orders/${workOrder.value.id}/edit`)
}

// 生命周期
onMounted(() => {
  loadWorkOrder()
  loadProcessRecords()
  loadCustomFields()
})
</script>

<style scoped>
.mobile-work-order-detail {
  min-height: 100vh;
  background-color: #f5f5f5;
  padding-bottom: 20px;
}

.mobile-header {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 12px 16px;
  position: sticky;
  top: 0;
  z-index: 100;
}

.header-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.header-title {
  font-size: 18px;
  font-weight: 600;
  flex: 1;
  text-align: center;
  margin: 0 12px;
}

.detail-content {
  padding: 16px;
}

.info-card {
  background: white;
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 16px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.order-number {
  font-size: 16px;
  font-weight: 600;
  color: #333;
}

.order-title {
  font-size: 18px;
  font-weight: 600;
  color: #333;
  margin-bottom: 16px;
  line-height: 1.4;
}

.order-meta {
  margin-bottom: 16px;
}

.meta-item {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
  color: #666;
  font-size: 14px;
}

.meta-item .el-icon {
  margin-right: 8px;
  color: #999;
}

.priority-section {
  display: flex;
  align-items: center;
}

.label {
  color: #666;
  margin-right: 8px;
  font-size: 14px;
}

.detail-card {
  background: white;
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 16px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.section-title {
  font-size: 16px;
  font-weight: 600;
  color: #333;
  margin-bottom: 16px;
  padding-bottom: 8px;
  border-bottom: 2px solid #f0f0f0;
}

.detail-item {
  display: flex;
  margin-bottom: 12px;
  align-items: flex-start;
}

.item-label {
  width: 80px;
  color: #666;
  font-size: 14px;
  flex-shrink: 0;
}

.item-value {
  flex: 1;
  color: #333;
  font-size: 14px;
  word-break: break-all;
}

.item-value.description {
  line-height: 1.5;
}

.action-card {
  background: white;
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 16px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.action-buttons {
  display: flex;
  flex-direction: column;
}

.button-row {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
}

.timeline {
  position: relative;
  margin-bottom: 20px;
}

.timeline-item {
  position: relative;
  padding-left: 30px;
  margin-bottom: 20px;
}

.timeline-item:not(:last-child)::before {
  content: '';
  position: absolute;
  left: 7px;
  top: 20px;
  bottom: -20px;
  width: 2px;
  background: #e4e7ed;
}

.timeline-dot {
  position: absolute;
  left: 0;
  top: 8px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #409eff;
  border: 2px solid white;
  box-shadow: 0 0 0 2px #e4e7ed;
}

.timeline-content {
  background: #f8f9fa;
  border-radius: 8px;
  padding: 16px;
  border-left: 3px solid #409eff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.record-action {
  font-weight: 600;
  color: #409eff;
  margin-bottom: 8px;
  font-size: 14px;
}

.record-description {
  color: #333;
  margin-bottom: 12px;
  line-height: 1.5;
  font-size: 14px;
}

.record-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  color: #999;
  padding-top: 8px;
  border-top: 1px solid #eee;
}

.operator {
  font-weight: 500;
}

.time {
  color: #999;
}

.add-record-section {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 2px solid #f0f0f0;
}

.add-record-section {
  border-top: 1px solid #f0f0f0;
  padding-top: 16px;
}

.material-section {
  margin-bottom: 20px;
}

.material-list {
  margin-top: 20px;
}

.material-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px;
  background: #f8f9fa;
  border-radius: 8px;
  margin-bottom: 8px;
}

.material-info {
  flex: 1;
}

.material-name {
  font-weight: 600;
  color: #333;
  margin-bottom: 4px;
}

.material-spec {
  color: #666;
  font-size: 12px;
  margin-bottom: 4px;
}

.material-quantity {
  color: #409eff;
  font-size: 14px;
  font-weight: 600;
}

@media (max-width: 480px) {
  .detail-content {
    padding: 12px;
  }
  
  .info-card,
  .detail-card,
  .action-card {
    padding: 16px;
    margin-bottom: 12px;
  }
  
  .order-title {
    font-size: 16px;
  }
  
  .section-title {
    font-size: 14px;
  }
}
</style>